
.mint-spinner-snake
  animation: mint-spinner-rotate 0.8s infinite linear;
  border: px2rem(8px) solid transparent;
  border-radius: 50%;

@keyframes mint-spinner-rotate
  0% 
    transform: rotate(0deg);

  100% 
    transform: rotate(360deg);


.mint-spinner-double-bounce
  position: relative;

.mint-spinner-double-bounce-bounce1, .mint-spinner-double-bounce-bounce2 
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: mint-spinner-double-bounce 2.0s infinite ease-in-out;

.mint-spinner-double-bounce-bounce2 
  animation-delay: -1.0s;

@keyframes mint-spinner-double-bounce
  0%, 100%
      transform: scale(0.0);
  
  50%
      transform: scale(1.0);
  

// .mint-spinner-triple-bounce {}
.mint-spinner-triple-bounce-bounce1, .mint-spinner-triple-bounce-bounce2, .mint-spinner-triple-bounce-bounce3
  border-radius: 100%;
  display: inline-block;
  animation: mint-spinner-triple-bounce 1.4s infinite ease-in-out both;

.mint-spinner-triple-bounce-bounce1 
  animation-delay: -0.32s;

.mint-spinner-triple-bounce-bounce2 
  animation-delay: -0.16s;


@keyframes mint-spinner-triple-bounce 
  0%, 80%, 100% 
    transform: scale(0);

  40%
    transform: scale(1.0);

.mint-spinner-fading-circle 
    position: relative

.mint-spinner-fading-circle-circle
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute

    &::before 
      content: " ";
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      border-radius: 100%;
      animation: mint-fading-circle 1.2s infinite ease-in-out both

    &.is-circle2 
      transform: rotate(30deg)

      &::before 
        animation-delay: -1.1s

    &.is-circle3 
      transform: rotate(60deg)

      &::before 
        animation-delay: -1s

    &.is-circle4 
      transform: rotate(90deg)

      &::before 
        animation-delay: -0.9s
    
    &.is-circle5 
      transform: rotate(120deg)
    
      &::before 
        animation-delay: -0.8s

    &.is-circle6 
      transform: rotate(150deg)

      &::before 
        animation-delay: -0.7s

    &.is-circle7 
      transform: rotate(180deg)

      &::before 
        animation-delay: -0.6s

    &.is-circle8 
      transform: rotate(210deg)

      &::before 
        animation-delay: -0.5s

    &.is-circle9 
      transform: rotate(240deg)

      &::before 
        animation-delay: -0.4s

    &.is-circle10 
      transform: rotate(270deg)

      &::before 
        animation-delay: -0.3s

    &.is-circle11 
        transform: rotate(300deg)
      
      &::before 
        animation-delay: -0.2s

    &.is-circle12 
      transform: rotate(330deg)

      &::before 
        animation-delay: -0.1s


@keyframes mint-fading-circle
    0%, 39%, 100% 
        opacity: 0
    
    40% 
        opacity: 1

